<template>
    <el-dialog style="overflow-x: hidden;overflow-y: auto;" v-model="announcementStore.isDialogShow" title="公告历史" width="800">
        <el-timeline style="max-width: 600px;max-height: 500px;">
            <el-timeline-item v-for="activity in announcementList" :key="activity.id"
             :timestamp="activity.updateTime"  placement="top">
             <el-card>
                <h4>{{ activity.title }}</h4>
                <p>{{ activity.content }}</p>
            </el-card>
            </el-timeline-item>
        </el-timeline>
    </el-dialog>
</template>

<script setup>
import { onMounted, reactive } from 'vue';
import { useAnnouncementStore } from '../../../stores/announcement'
import { getAnnouncement } from '../../../api/announcement';
import { ElMessage } from 'element-plus';


const announcementStore = new useAnnouncementStore()
const announcementList = reactive([])

onMounted(() => {
    getAllAnnouncement()
})


//获取公告历史
async function getAllAnnouncement() {
    try {
        const res = await getAnnouncement();
        if (res.code === 200) {
            announcementList.splice(0, announcementList.length, ...res.data.list);
        }
    } catch (error) {
        ElMessage({
            type: 'error',
            message: '获取数据失败: ' + error.message,
        });
    }
}
</script>

<style scoped></style>
